<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>기본 예제</title>
<meta name="class-lists" content="jindo.RolloverClick"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="가장 기본적인 사용 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	ul { list-style: none; position:relative;float:left;padding-left:10px;}
	ul li { width:120px; border:1px solid black; margin:1px 0 0 0;}
	ul li a{ color:#EEEEEE;display:block; font-size:14px; font-weight:bold; padding:7px; text-decoration:none;}
	
	.rollover, .s_rollover {background:#0075c8; }
	.rollover-over{ background:#FFFFFF;}
	.rollover-over a{ color:#0075c8;}
	.rollover-down{ background:#DDDDDD;}
	.rollover-down a{ color:#0075c8;}
	
	.sample { border:0px;color:black; font-size:13px; }
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<ul>
	    <li class="sample">Click</li>
	    <li class="rollover rollover_click"><a href="#">0</a></li>
	    <li class="rollover rollover_click"><a href="#">0</a></li>
	    <li class="rollover rollover_click"><a href="#">0</a></li>
	</ul>
	  
	<ul>
	    <li class="sample">MouseDown</li>
	    <li class="rollover rollover_down"><a href="#">0</a></li>
	    <li class="rollover rollover_down"><a href="#">0</a></li>
	    <li class="rollover rollover_down"><a href="#">0</a></li>
	</ul>
	<ul>
	    <li class="sample">MouseUp</li>
	    <li class="rollover rollover_up"><a href="#">0</a></li>
	    <li class="rollover rollover_up"><a href="#">0</a></li>
	    <li class="rollover rollover_up"><a href="#">0</a></li>
	</ul>
	  
	<ul>
	    <li class="sample">CSS 적용 샘플</li>
	    <li class="s_rollover"><a href="#">Default Style</a></li>
	    <li class="s_rollover rollover-over"><a href="#">MouseOver</a></li>
	    <li class="s_rollover rollover-down"><a href="#">MouseDown</a></li>
	</ul>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.RolloverArea.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.RolloverClick.js"></script>
<script type="text/javascript">
	var oRolloverClick = new jindo.RolloverClick(document.body, {
		sCheckEvent : "click",
		bCheckDblClick : false,
		RolloverArea : {
			sClassName : "rollover_click",
			sClassPrefix : "rollover-",
			htStatus : {
	
				sOver : "over",
				sDown : "down"
			}
		}
	}).attach({
		click : function(oCustomEvent) {
			//컴포넌트가 적용된 엘리먼트에 마우스를 클릭했을 때 발생
			var n = jindo.$Element(jindo.$Element(oCustomEvent.element).query('a')).html();
			n = n != "" ? parseInt(n, 10)+1 :  1;
			jindo.$Element(jindo.$Element(oCustomEvent.element).query('a')).html(n); 
		}
	});
	var oRolloverClick_mousedown = new jindo.RolloverClick(document.body, {
		sCheckEvent : "mousedown",
		bCheckDblClick : false,
		RolloverArea : {
			sClassName : "rollover_down",
			sClassPrefix : "rollover-",
			htStatus : {
				sOver : "over",
				sDown : "down"
			}
		}
	}).attach({
		click : function(oCustomEvent) {
			//컴포넌트가 적용된 엘리먼트에 마우스를 클릭했을 때 발생
			var n = jindo.$Element(jindo.$Element(oCustomEvent.element).query('a')).html();
			n = n != "" ? parseInt(n, 10)+1 :  1;
			jindo.$Element(jindo.$Element(oCustomEvent.element).query('a')).html(n); 
		}
	});
	var oRolloverClick_mousedown = new jindo.RolloverClick(document.body, {
		sCheckEvent : "mouseup",
		bCheckDblClick : false,
		RolloverArea : {
			sClassName : "rollover_up",
			sClassPrefix : "rollover-",
			htStatus : {
				sOver : "over",
				sDown : "down"
			}
		}
	}).attach({
		click : function(oCustomEvent) {
			//컴포넌트가 적용된 엘리먼트에 마우스를 클릭했을 때 발생
			var n = jindo.$Element(jindo.$Element(oCustomEvent.element).query('a')).html();
			n = n != "" ? parseInt(n, 10)+1 :  1;
			jindo.$Element(jindo.$Element(oCustomEvent.element).query('a')).html(n); 
		}
	});
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
	
	
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
  
<ul>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>